<!--酒店页面-->
<template>
  <div style="width: 130vh;margin: 0 auto">
    <el-row :gutter="10">
      <el-col :span="16">
        <div style="width: 50vh;display: inline-block">
          <el-card class="hotel-search">
            <h2>预定酒店</h2>
            <el-form label-position="top">
              <div style="width: 74vh;height: 85px;background-color: #fff;border-radius: 10px;">
                <div class="form-group">
                  <el-form-item label="目的地" style="width: 150px">
                    <el-input placeholder="请输入目的地" v-model="searchForm.city"></el-input>
                  </el-form-item>
                </div>
                <div class="form-group">
                  <el-form-item label="入住日期">
                    <el-date-picker
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="入住日期"
                        end-placeholder="退房日期"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        v-model="times"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </div>
              <div style="display: flex">
                <div style="width: 75vh;height: 85px;background-color: #fff;border-radius: 10px;display: inline-block;margin-top: 30px">
                  <el-row :gutter="5">
                    <el-col :span="8">
                      <div class="form-group">
                        <el-form-item label="房间数量">
                          <el-input-number v-model="searchForm.room" :min="1" :max="10"/>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="form-group">
                        <el-form-item label="住客人数">
                          <el-input-number v-model="searchForm.person" :min="1" :max="10"/>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="form-group">
                        <el-form-item label="酒店级别">
                          <el-select style="width: 150px" v-model="searchForm.type">
                            <el-option label="不限" value='00'></el-option>
                            <el-option label="星级" value="10"></el-option>
                            <el-option label="民宿" value="20"></el-option>
                            <el-option label="公寓" value="30"></el-option>
                            <el-option label="快捷酒店" value="40"></el-option>
                          </el-select>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <div class="form-group">
                  <button type="button" @click="searchHotel"><el-icon><Search /></el-icon>搜索</button>
                </div>
              </div>
            </el-form>
          </el-card>
          <!--轮播图区域 高度:240px-->
          <el-carousel style="height: 140px;width: 82vh;margin-top: 30px;border-radius: 10px;">
            <el-carousel-item v-for="(url,index) in bannerArr" :key="index">
              <img :src="url" style="width: 100%;border-radius: 10px;">
            </el-carousel-item>
          </el-carousel>
          <div>
            <div style="width: 80vh;height: 20px;font-size: 20px">
              酒店<span style="color: #f70">推荐</span>
            </div>
            <div style="margin-top: 15px">
              <el-row :gutter="10" style="width: 83vh">
                <el-col :span="8" v-for="p in Arr" style="margin: 10px 0;">
                  <el-card>
                    <img :src="p.url" style="width: 100%;height: 100%">
                    <p class="title">
                      {{p.title}}
                    </p>
                    <el-rate
                        v-model="p.lvcard"
                        disabled
                        text-color="#ff9900"
                    />
                    <div style="color:#007fe9;display:flex;margin-bottom:10px"><span class="spanPfen">{{p.lvcard}}/5</span>
                      <div v-if="p.lvcard >= 3">棒</div>
                      <div v-else>体验良好</div>
                    </div>
                    <div>
                      <span style="color: red;">¥{{p.price}}</span>
                    </div>
                    <div style="margin-top:10px;font-size:12px">655条评论</div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="right-pic">
        <el-carousel style="border-radius: 10px;position: relative; height: 90vh" arrow="never">
          <el-carousel-item v-for="url in bannerRightArr" style="height: 90vh;" >
            <img :src="url" style="height: 100%;border-radius: 10px;object-fit: contain;position: absolute">
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";

//定义入住时间到退房时间的数组
const times = ref([]);

onMounted(()=>{
  const today = new Date().toISOString().slice(0, 10);
  const tomorrow = new Date();
  tomorrow.setDate(tomorrow.getDate() + 1);
  times.value = [today, tomorrow.toISOString().slice(0, 10)];
  searchForm.value.city = '长沙';
  searchForm.value.type = '00';
})

//定义对象用来保存搜索条件表单内容
const searchForm = ref({
  city:'',
  type:'',
  room:1,
  person:1,
})
//定义方法将数据提交到后台
const searchHotel = () => {
  //将其余变量放入表单对象中
  searchForm.value.checkinDate = times.value[0];//入住时间
  searchForm.value.checkoutDate = times.value[1];//退房时间
  // 将表单数据存储到 Local Storage 中
  localStorage.setItem('searchFormResult', JSON.stringify(searchForm.value));
  // 跳转到 searchHotel 页面
  router.push('/searchHotel');
}


//主体轮播图
const bannerArr = ref(["/imgs/banner5.jpg","/imgs/banner4.jpg"]);
//右侧轮播图
const bannerRightArr = ref([
    "/hotel/hotelpic1.jpg",
    "/hotel/hotelpic2.jpg",
    "/hotel/hotelpic3.jpg",
    "/hotel/hotelpic4.jpg",
]);
// 酒店推荐图片数组
const Arr = ref([
  {title: "长沙国金中心异国印象·悦酒店", price: 319,url: "/imgs/m.jpg",lvcard:2},
  {title: "深圳海岸城购物中心南山地铁站亚朵酒店", price: 459,  url: "/imgs/n.jpg",lvcard:2},
  {title: "三亚梧桐九里·Aromatic海景艺宿(天涯海角店)", price: 458, url: "/imgs/q.jpg",lvcard:5},
  {title: "天津蓝庭假日酒店(五大道直沽地铁站店)", price: 666,  url: "/imgs/t.jpg",lvcard:2},
  {title: "俪居花园酒店(武汉体育中心江汉大学店)", price: 300, url: "/imgs/s.jpg",lvcard:3},
  {title: "长沙国金中心异国印象·悦酒店", price: 213, url: "/imgs/z.jpg",lvcard:2},
]);
</script>

<style scoped>
.hotel-search {
  width: 80vh;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-image: url("../../../public/imgs/login.jpg");
  background-size: cover;
}

.hotel-search h2 {
  text-align: left;
  margin-bottom: 20px;
  color: #fff;
}

.form-group {
  margin: 15px;
  display: inline-block;
}

.form-group button {
  width: 110px;
  height: 85px;
  padding: 12px;
  margin-top: 15px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  transition: background-color 0.3s ease;
}
.title{
    /*溢出部分显示为省略号*/
    /*强制文本内容不换行*/
    white-space: nowrap;
    /*设置溢出文字隐藏*/
    overflow: hidden;
    /*设置溢出文字显示为省略号*/
    text-overflow: ellipsis;
}

.spanPfen{
  display: block;
  width: 30px;
  height: 20px;
  background: #007fe9;
  color: #fff;
  text-align: center;
  line-height: 20px;
  border-radius: 5px;
  margin-right: 10px;
}
.right-pic{
  width: 100%;
  height: 1220px;
  border-radius: 10px;
}


</style>